<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<h1>Animation on Scroll Using Intersection Observer API</h1>
<div class="container">
<div class="item">
<h2>Lorem ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ab delectus veniam laudantium eaque, aut sed ad accusamus autem nisi praesentium modi voluptas impedit quod pariatur aliquid quam omnis harum, blanditiis voluptates cumque. Iure
minima hic, id molestias, eveniet sed!</p>
</div>
<div class="item">
<h2>Sequi, expedita, asperiores.</h2>
<p>Saepe, harum! Dolor veritatis minus nemo rem, dolore quod illum esse deserunt deleniti nihil quisquam aut sapiente incidunt similique ut aperiam ea earum, voluptatem accusamus vero facilis. Eius iure culpa non recusandae nostrum, et amet,
mollitia sapiente ut, facilis, sint.</p>
</div>
<div class="item">
<h2>Blanditiis, laboriosam, odit!</h2>
<p>Facilis consequuntur nam maxime vero rerum! Velit, possimus animi ducimus ullam, distinctio repellendus saepe repudiandae consectetur laudantium nisi, modi ab obcaecati perferendis quod voluptatem vitae officiis esse. Reiciendis similique
alias expedita vel aliquid id, provident est facere voluptas cumque rerum.</p>
</div>
<div class="item">
<h2>Repellendus praesentium, nulla.</h2>
<p>Consequatur ab tempore, harum vero laborum voluptatum dignissimos, mollitia doloribus unde est quae provident enim minus magnam suscipit. Voluptatem vero odit nesciunt autem iste quasi at unde quidem fugiat commodi et atque eveniet, perspiciatis
cumque odio quis porro sint, voluptates?</p>
</div>
<div class="item">
<h2>Ex, quasi, incidunt.</h2>
<p>Commodi, excepturi a ducimus totam odit aspernatur enim officiis assumenda. Voluptate iste, libero suscipit, animi esse laboriosam ratione distinctio, tempora explicabo ut modi est soluta nulla error. Nisi inventore dolores in exercitationem
provident reprehenderit aut, numquam, cum iste soluta sit.</p>
</div>
<div class="item">
<h2>Quisquam, nesciunt dicta?</h2>
<p>Nulla culpa libero quis, architecto dicta incidunt placeat iste non, aliquam amet hic, magni ducimus! Ratione, quasi, expedita, iusto vitae repudiandae sint esse placeat similique saepe ad eligendi corporis delectus cum perferendis, labore
ducimus. Est ad fuga corporis nam quibusdam.</p>
